<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/page/inc/taglib.jsp"%>
<%
	String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>样例管理后台</title>
<jsp:include page="inc/dwz.jsp" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- <style type="text/css">
.ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #e8edf3; border:1px silver solid;}
.ztree li a.level0.cur {background-color: #eaf4ff; }
.ztree li a.level0 span {display: block; color: #183152; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
.ztree li a.level0 span.button {	float:right; margin-left: 10px; visibility: visible;display:none;}
.ztree li span.button.switch.level0 {display:none;}
	</style> -->
	
<style type="text/css">
<!--菜单样式-->
.accordion, .zTreeDemoBackground {
	height: 918px;
}

.ztree {
	height: 100%;
	margin: 0;
	padding: 0;
	color: #333;
}

.ztree>li {
	border: solid 1px silver;
	border-bottom-width: 0px;
}

.ztree li a.level0 {
	height: 25px;
	text-align: center;
	display: block;
	background: url(statics/dwz/themes/default/images/accordion/accordion.png) repeat-x 0 0;
}

.ztree li a.level0 span {
	padding: 0 25px 0 5px;
	background: url(statics/dwz/themes/default/images/accordion/accordion.png) no-repeat 100% -52px;
	color: #183152;
	font-size: 12px;
	font-weight: bold;
	word-spacing: 2px;
	text-align: left;
	margin-left: 5px;
	display: block;
	overflow: hidden;
	height: 25px;
	line-height: 20px;
}

.ztree li a.level0 span.button {
	float: right;
	margin-left: 10px;
	visibility: visible;
	display: none;
}

.ztree li a.level0 span.ico_open+span {
	background-position: 100% -102px;
}

.ztree li span.button.switch.level0 {
	display: none;
}

.ztree li ul {
	height: 100%;
}
</style>
</head>
<body scroll="no">
	<div id="layout">
		<div id="header">
			<!-- navMenu begin -->
			<div class="headerNav">
				<img alt="" src="${pageContext.request.contextPath}/statics/images/logo.png" height="50" />
				<ul class="nav">
					<li style="color: black;">欢迎您（${sessionScope.exampleuser.employeeName}）！&nbsp;当前时间： <span id="time"></li>
					<li><a href="javascript:" style="color: black;">${userNo}</a></li>
					<!-- 	<li><a href="pms_userViewOwnInfo.action" target="dialog" width="500" height="400" style="color: #fff;">帐号信息</a></li>
                <li><a href="pms_userChangeOwnPwdUI.action" target="dialog" width="550" height="300" style="color: #fff;">修改密码</a></li> -->
					<%--   <li><a href="logout" title="退出登录确认" width="300" height="200" style="color: #fff;">退出</a></li>--%>
					<li><a href="${pageContext.request.contextPath}/toLogout" target="dialog" width="300" height="200" mask="true" style="color: #fff;">退出</a></li>
				</ul>
				<ul class="themeList" id="themeList">
					<li theme="default">
						<div class="selected">蓝色</div>
					</li>
					<li theme="green">
						<div>绿色</div>
					</li>
					<li theme="purple">
						<div>紫色</div>
					</li>
					<li theme="silver">
						<div>银色</div>
					</li>
					<li theme="azure">
						<div>天蓝</div>
					</li>
				</ul>
			</div>
			<!-- navMenu end -->

		</div>

		<div id="leftside">
			<div id="sidebar_s">
				<div class="collapse">
					<div class="toggleCollapse">
						<div></div>
					</div>
				</div>
			</div>
			<div id="sidebar">
				<div class="toggleCollapse">
					<h2>主菜单</h2>
					<div>收缩</div>
				</div>

				<div class="accordion" fillSpace="sidebar">
					 <div class="zTreeDemoBackground left">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
					<!-- 迭代一级菜单 -->
					<%-- <c:forEach items="${sessionScope.examplemenu }" var="menu1">
                    <c:if test="${ menu1.level==1}">
                        <div class="accordionHeader">
                            <h2>
                                <span>Folder</span>${menu1.name }
                                <a href="${pageContext.request.contextPath}/system/tpRole/list" target="navTab" rel="${pageContext.request.contextPath}/system/tpRole/list" fresh="true">/system/tpRole/list</a>
                            </h2>
                        </div>
                        <div class="accordionContent">
                            <ul class="tree treeFolder">
                                <!-- 迭代二级菜单 -->
                                <c:forEach items="${sessionScope.examplemenu }" var="menu2">
                                    <c:if test="${ menu2.level==2 && menu1.id==menu2.pid}">
                                        <li><a href="${pageContext.request.contextPath}${menu2.url }" target="navTab" rel="${pageContext.request.contextPath}${menu2.url }" fresh="true">${menu2.name }</a></li>
                                    </c:if>
                                </c:forEach>
                            </ul>
                        </div>
                    </c:if>
                </c:forEach> --%>

					<%-- <div class="accordionHeader">
						<h2>
							<span>Folder</span>系统管理
						</h2>
					</div>
					<div class="accordionContent">
						<ul class="tree treeFolder">
							<li><a href="${pageContext.request.contextPath}/system/merchantEmployees/list" target="navTab" rel="${pageContext.request.contextPath}/system/merchantEmployees/list" fresh="true">员工管理</a></li>
							<li><a href="${pageContext.request.contextPath}/system/role/list" target="navTab" rel="${pageContext.request.contextPath}/system/role/list" fresh="true">角色管理</a></li>
							<li><a href="${pageContext.request.contextPath}/system/permission/list" target="navTab" rel="${pageContext.request.contextPath}/system/permission/list" fresh="true">权限管理</a></li>
						</ul>
					</div> --%>
				</div>
			</div>
		</div>
		<div id="container">
			<div id="navTab" class="tabsPage">
				<div class="tabsPageHeader">
					<div class="tabsPageHeaderContent">
						<ul class="navTab-tab">
							<li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">主页</span></span></a></li>
						</ul>
					</div>
					<div class="tabsLeft">left</div>
					<div class="tabsRight">right</div>
					<div class="tabsMore">more</div>
				</div>
				<ul class="tabsMoreList">
					<li><a href="javascript:;">主页</a></li>
				</ul>
				<div class="navTab-panel tabsPageContent layoutBox">
					<div class="page unitBox">
						<div class="accountInfo">
							<p>
								<span>权限管理后台</span>
							</p>
						</div>
						<div class="pageFormContent" layoutH="60" style="margin-right: 230px"></div>
					</div>

				</div>
			</div>
		</div>

	</div>

	<div id="footer">Copyright &copy; 2017 JKOSS</div>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/ztree/js/jquery.ztree.core.js">
</script>
<script type="text/javascript">
	//创建一个日期对象
	function show() {
		var d = new Date();
		//获取年份
		//var nian=d.getYear();//2016  //16
		var nian = d.getFullYear();//2016
		//获取月
		var yue = d.getMonth() + 1;//6   july 7月   0-11
		//获取星期几
		var xq = d.getDay();//5    0-6    0:星期天
		//获取几号
		var dd = d.getDate();//1    1-31
		//获取小时
		var h = d.getHours();// 16下午4点     24小时制
		//获取分钟
		var m = d.getMinutes();//31分
		//获取描述
		var s = d.getSeconds();//50秒
		document.getElementById("time").innerHTML = nian + "-" + yue + "-" + dd + " " + h + ":" + m + ":" + s;
	}

	setInterval("show()", 1000);

	//菜单迭代
	var menus = ${sessionScope.examplemenu};
	var path = "${pageContext.request.contextPath}";
	//父菜单
	function pmenu(menus) {
		console.log(menus);
		var pmenuhtml = "";
		for (var i = 0; i < menus.length; i++) {
			pmenuhtml += "<div class='accordionHeader'>" + "	<h2>" + "		<span>Folder</span>" + menus[i].name
			//+"		<a href='${pageContext.request.contextPath}/system/tpRole/list' target='navTab' rel='${pageContext.request.contextPath}/system/tpRole/list' fresh='true'>/system/tpRole/list</a>"
			+ "	</h2>" + "</div>"
			var submenu = menus[i].submenu;
			if (submenu) {
				pmenuhtml += "<div class='accordionContent'>"
				pmenuhtml += subMenu(menus[i]);
				pmenuhtml += "</div>"
			}

		}
		$(".accordion").html(pmenuhtml);
	}
	//子菜单
	function subMenu(menu) {
		var submenu = menu.submenu;
		console.log(submenu);
		if (submenu) {
			var submenuhtmls = "";
			//控制树的li显示
			for (var i = 0; i < submenu.length; i++) {
				if (submenu[i].type != 2) {
				
				var href = "";
				var rel = "";
				if (submenu[i].type == 1) {
					href = "href='" + path + submenu[i].url + "' rel='" + path + submenu[i].url + "' target='navTab' fresh='true'";
				}
				submenuhtmls += "		<li><a "+href+"><i class='"+submenu[i].icon+"'></i>" + submenu[i].name + "</a>"
				var subMenus = subMenu(submenu[i]);
				if (subMenus) {
					submenuhtmls += subMenus;
				}
				submenuhtmls += "</li>"
				}
			}
			//控制树的ul显示
			var submenuhtml = "";
			var submenuhtmlhead = "";
			var submenuhtmltail = "	</ul>";
			if (submenu[0].level == 2) {
				submenuhtmlhead = "	<ul class='tree'>";
			} else {
				submenuhtmlhead = "	<ul>";
			}
			//submenuhtml += submenuhtmls + "	</ul>"

			if(submenuhtmls){
				submenuhtml = submenuhtmlhead + submenuhtmls + submenuhtmltail;
			}
			
			return submenuhtml;
		}
	}
	$(function() {
		//熏染菜单
		//pmenu(menus);
	})
	
		var curMenu = null, zTree_Menu = null;
		var setting = {
			view: {
				showLine: true,
				selectedMulti: false,
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onNodeCreated: this.onNodeCreated,
				beforeClick: this.beforeClick,
				onClick: this.onClick
			}
		};

		var zNodes =menus;

		function beforeClick(treeId, node) {
			if (node.isParent) {
				if (node.level === 0) {
					var pNode = curMenu;
					while (pNode && pNode.level !==0) {
						pNode = pNode.getParentNode();
					}
					if (pNode !== node) {
						var a = $("#" + pNode.tId + "_a");
						a.removeClass("cur");
						zTree_Menu.expandNode(pNode, false);
					}
					a = $("#" + node.tId + "_a");
					a.addClass("cur");

					var isOpen = false;
					for (var i=0,l=node.children.length; i<l; i++) {
						if(node.children[i].open) {
							isOpen = true;
							break;
						}
					}
					if (isOpen) {
						zTree_Menu.expandNode(node, true);
						curMenu = node;
					} else {
						zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
						curMenu = node.children[0];
					}
				} else {
					zTree_Menu.expandNode(node);
				}
			}
			return !node.isParent;
		}
		function onClick(e, treeId, node) {
			navTab.openTab(node.tId, path+node.other, { title:node.name, fresh:false, data:{} });
		}

		$(document).ready(function(){
			console.log(zNodes);
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
			//curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
			curMenu = zTree_Menu.getNodes()[0].children[0];
			zTree_Menu.selectNode(curMenu);
			var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
			a.addClass("cur");
		});
</script>
</html>